<template>
    <div class="crm-project-process-container">
        <el-dialog title="过程详情" v-model="isShowDialog" width="95%" append-to-body :close-on-click-modal="false" :style="{ minHeight: '500px' }">
            <el-tabs v-model="activeName" class="project-detail">
                <el-tab-pane label="过程详情" name="project">
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="过程名称">{{ process.processName }}</el-descriptions-item>
                        <el-descriptions-item label="开始时间">{{ process.processStartTime }}</el-descriptions-item>
                        <el-descriptions-item label="结束时间">{{ process.processEndTime }}</el-descriptions-item>
                        <el-descriptions-item label="完成时间">{{ process.finishTime }}</el-descriptions-item>
                        <el-descriptions-item label="项目状态">{{ projectStatusText(process.processStatus) }}</el-descriptions-item>
                        <el-descriptions-item label="执行人" :span="3">
                            <el-tag type="primary" class="mr10" v-for="executor in process.processExecutors">{{ executor.executorName }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="过程内容" :span="4">{{ process.processText }}</el-descriptions-item>
                        <el-descriptions-item label="备注" :span="4">{{ process.remark }}</el-descriptions-item>
                        <el-descriptions-item label="创建者">{{ process.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ process.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ process.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ process.updateTime }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="mt15" :column="4" border v-if="process.attachments && process.attachments.length > 0">
                        <el-descriptions-item label="项目文件">
                            <el-link class="mr10" type="primary" v-for="item in process.attachments" :key="item" :inline="true" :href="getStorageAccessTokenUrl(item.url)" target="_blank" :underline="false" :download="item.name">{{ item.name }}</el-link>
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-carousel class="mt15" height="800px" :autoplay="false" v-if="process.canpreviews && process.canpreviews.length > 0">
                        <el-carousel-item v-for="item in process.canpreviews" :key="item">
                            <center>
                                <template v-if="item.url.toLowerCase().endsWith('.pdf')">
                                    <iframe :src="getStorageAccessTokenUrl(item.url)" width="100%" height="800px" frameborder="0"></iframe>
                                </template>
                                <!-- .jpg,.png,.svg,.webp,.gif -->
                                <template v-else>
                                    <el-image style="max-width: auto; height: 800px;" :src="getStorageAccessTokenUrl(item.url)" fit="contain" />
                                </template>
                            </center>
                        </el-carousel-item>
                    </el-carousel>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { Session } from '/@/utils/storage';
import { getCrmProjectProcess } from '/@/api/crm/project/process/index';
export default {
    name: 'crm/project/process/info',
    setup(props, context) {
        const state = reactive({
            isShowDialog: false,
            activeName: 'project',
            process: {
                attachments: [],
                canpreviews: [],
            },
        });

        const projectStatusText = (status: String) => {
            const statusMap = {
                '0': '未开始',
                '1': '进行中',
                '2': '已完成',
                '3': '已暂停',
            };
            return statusMap[status] || '未知';
        };

        // 打开弹窗
        const openDialog = (row?: object) => {
            state.isShowDialog = true;
            if(row){
                getCrmProjectProcess({id: row.id}).then((res) => {
                    if(res.code == 0){
                        state.process = Object.assign({}, res.data);
                        if(state.process.attachments && state.process.attachments.length > 0){
                            state.process.canpreviews = state.process.attachments.filter(a => !a.url.toLowerCase().endsWith('.zip') && !a.url.toLowerCase().endsWith('.rar'));
                        }
                    }
                });
            }
        };
        // 关闭弹窗
        const closeDialog = (row?: object) => {
            state.isShowDialog = false;
            state.process = {
                attachments: [],
                canpreviews: [],
            };
        };
        const getStorageAccessTokenUrl = (url: String) => {
            return url + '?accessToken=' + Session.get('token');
        };
        return {
            openDialog,
            closeDialog,
            projectStatusText,
            getStorageAccessTokenUrl,
            ...toRefs(state),
        };
    },
};
</script>
<style scoped lang="scss">
.crm-project-process-container {
    :deep .el-descriptions .is-bordered-label {
        width: 100px !important; /* 固定宽度为 100px */
    }
}
</style>